import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class ConstrainedBoxExample extends StatefulWidget {
  const ConstrainedBoxExample({Key? key}) : super(key: key);

  @override
  State<ConstrainedBoxExample> createState() => _ConstrainedBoxExampleState();
}

class _ConstrainedBoxExampleState extends State<ConstrainedBoxExample> {
  var language = 'english';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          // UnconstrainedBox 使用场景非常少，主要用于去除多重限制
          UnconstrainedBox(
            child: Container(
              width: 20,
              height: 20,
              color: Colors.pink,
              child: IconButton(
                onPressed: () {},
                icon: Icon(Icons.alarm),
                iconSize: 20,
                padding: EdgeInsets.zero,
              ),
            ),
          ),
          IconButton(
            onPressed: () {},
            icon: Icon(Icons.add),
          ),
          PopupMenuButton(
            child: Row(
              children: [
                Text('$language | '),
                Icon(
                  Icons.keyboard_arrow_down,
                  color: Colors.white,
                )
              ],
            ),
            onSelected: (value) {
              setState(() {
                language = value as String;
              });

              if (kDebugMode) {
                print(value);
              }
            },
            itemBuilder: (BuildContext context) {
              return [
                PopupMenuItem(
                  value: '',
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'change language',
                            style: TextStyle(
                              color: Color(0xFF1B2547),
                              fontFamily: 'Roboto',
                              fontWeight: FontWeight.w500,
                              fontSize: 14,
                            ),
                          ),
                          Icon(Icons.keyboard_arrow_up,
                              color: Colors.blue.shade800)
                        ],
                      ),
                      Divider(color: Colors.grey.shade300, thickness: 2),
                    ],
                  ),
                ),
                PopupMenuItem(
                  value: 'english',
                  child: Text(
                    'english',
                    style: TextStyle(
                        fontFamily: 'Roboto',
                        fontWeight: FontWeight.w500,
                        fontSize: 14,
                        color: language == 'english'
                            ? Colors.blue
                            : Color(0xFF1B2547)),
                  ),
                ),
                PopupMenuItem(
                  value: 'espanol',
                  child: Text(
                    'espanol',
                    style: TextStyle(
                        fontFamily: 'Roboto',
                        fontWeight: FontWeight.w500,
                        fontSize: 14,
                        color: language == 'espanol'
                            ? Colors.blue
                            : Color(0xFF1B2547)),
                  ),
                ),
                PopupMenuItem(
                  value: 'nederlands',
                  child: Text(
                    'nederlands',
                    style: TextStyle(
                        fontFamily: 'Roboto',
                        fontWeight: FontWeight.w500,
                        fontSize: 14,
                        color: language == 'nederlands'
                            ? Colors.blue
                            : Color(0xFF1B2547)),
                  ),
                ),
                PopupMenuItem(
                  value: 'polski',
                  child: Text(
                    'polski',
                    style: TextStyle(
                        fontFamily: 'Roboto',
                        fontWeight: FontWeight.w500,
                        fontSize: 14,
                        color: language == 'polski'
                            ? Colors.blue
                            : Color(0xFF1B2547)),
                  ),
                ),
              ];
            },
          ),
          const SizedBox(width: 12)
        ],
      ),
      body: SizedBox(
        width: 300,
        height: 300,
        // ConstrainedBox 会根据子组件的需要自动调整宽度和高度以达到最佳的适配效果，
        //如果确切知道组件需要设定多少宽高那么ConstrainedBox 就不在适合。
        // BoxConstraints 为 ConstrainedBox 额外增加的附加选项，尽可能达到业务需求
        child: ConstrainedBox(
          // constraints: BoxConstraints(
          //   minWidth: 10,
          //   maxWidth: 100,
          //   minHeight: 100,
          //   maxHeight: 100,
          // ),
          // constraints: BoxConstraints.tight(Size(100, 100)),
          // constraints: BoxConstraints.tightFor(width: 100, height: 100),
          // constraints: BoxConstraints.tight(Size(100, 100)),
          constraints: BoxConstraints.expand(),
          child: Container(
            color: Colors.orangeAccent,
            child: Text('ConstrainedExample'),
          ),
        ),
      ),
    );
  }
}
